<div class="pipelineAdmin">
    <nz-card nzTitle="Settings" class="coloredTitle">
        <form nz-form #pipelineUpdateFrom="ngForm" (ngSubmit)="updatePipeline()">
            <nz-form-item>
                <nz-form-label>Pipeline name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" [(ngModel)]="editablePipeline.name" name="pipname" [disabled]="loading">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>Description</nz-form-label>
                <nz-form-control>
                    <textarea nz-input type="text" [(ngModel)]="editablePipeline.description" name="pipdesc" [disabled]="loading"></textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nzJustify="end">
                <button nz-button nzType="primary" [nzLoading]="loading" [disabled]="loading || editablePipeline.from_repository !== ''" type="submit" name="updateButton">Save</button>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Danger zone" class="redTitle">
        <nz-row>
            <nz-col [nzSpan]="12">
                <div class="title">Delete pipeline</div>
                <div class="description">Once you delete an pipeline, there is no going back. Please be certain.</div>
            </nz-col>
            <nz-col [nzSpan]="12" class="alignRight">
                <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this pipeline ?"
                        [nzLoading]="loading" (nzOnConfirm)="deletePipeline()">Delete</button>
            </nz-col>
        </nz-row>
    </nz-card>
</div>
